<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />

	<script src="js/vue.global.prod.js"></script>
	<script src="js/axios.min.js"></script>
	<script src="js/echarts.common.min.js"></script>

<title>柱状图统计</title>
</head>
<body >
	<div id="app">
		<div id="main" style="width: 600px; height: 400px;"></div>
	</div>
</body>
</html>

<!--<script type="text/javascript">-->
<!--	//初始化echarts实例-->
<!--	var myChart = echarts.init(document.getElementById('main'));-->
<!--	//指定图表的配置和数据-->
<!--	var option = {-->
<!--		//图表标题-->
<!--		title:{-->
<!--			text:'ECharts 数据统计柱状图'-->
<!--		},-->
<!--		tooltip : {-->
<!--			trigger: 'axis',-->
<!--			axisPointer : {            // 坐标轴指示器，坐标轴触发有效-->
<!--				type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'-->
<!--			}-->
<!--		},-->
<!--		//X轴数据-->
<!--		xAxis:{-->
<!--			data:["Android","IOS","PC","Ohter"]-->
<!--		},-->
<!--		//Y轴数据-->
<!--		yAxis:{-->

<!--		},-->
<!--		//系列列表-->
<!--		series:[{-->
<!--			name:'访问量',-->
<!--			type:'bar',-->
<!--			label: {-->
<!--				normal: {-->
<!--					show: true-->
<!--				}-->
<!--			},-->
<!--			data:[50,20,360,100]-->
<!--		}]-->
<!--	};-->

<!--	//使用制定的配置项和数据显示图表-->
<!--	myChart.setOption(option);-->
<!--</script>-->

<script type="text/javascript">

	const {createApp,toRefs,reactive,computed,toRef} = Vue;

	createApp({
		setup(){
			const data = reactive({

			})

			const mounted = () =>{
				// 初始化实例对象  echarts.init(dom容器);
				let myChart = echarts.init(document.getElementById("main"));
				//echarts属性配置
				let option = {
					//图表标题
					title:{
						text:'ECharts 数据统计柱状图'
					},
					tooltip : {
						trigger: 'axis',
						axisPointer : {            // 坐标轴指示器，坐标轴触发有效
							type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
						}
					},
					//X轴数据
					xAxis:{
						data:["Android","IOS","PC","Ohter"]
					},
					//Y轴数据
					yAxis:{
					},
					//系列列表
					series:[{
						name:'访问量',
						type:'bar',
						label: {
							normal: {
								show: true
							}
						},
						data:[50,20,360,100]
					}]
				};
				// 把配置项给实例对象
				myChart.setOption(option);
			}

			// const createNative = () =>{
			// 	axios.get('http://localhost:9000/createNative?order_num=LOGTS202311291501189159&total_fee=100',{})
			// 			.then(function (res) {
			// 				data.out_trade_no = res.data.out_trade_no
			// 				data.total_fee = res.data.total_fee
			//
			// 				//二维码
			// 				qr = new QRious({
			// 					element:document.getElementById('qrious'),
			// 					size:250,
			// 					level:'H',
			// 					value:res.data.qrcode
			// 				});
			//
			// 			})
			// }
			mounted()
			return {...toRefs(data),mounted}
		}
	}).mount('#app');


</script>
